<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <br>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input placeholder="输入用户名查询" clearable v-model="query.searchName"/>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" round @click="getUserList">
              <el-icon><Search/></el-icon>
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-table border :data="userList" stripe style="width: 100%">
          <el-table-column type="index" align="center" />
          <el-table-column prop="userName" label="用户名" align="center"/>
          <el-table-column prop="userSex" label="性别" align="center">
            <template #default="scope">
              {{ scope.row.userSex === 1 ? '男' : (scope.row.userSex === null ? '' : '女') }}
            </template>
          </el-table-column>
          <el-table-column prop="userEmail" label="邮箱" align="center"/>
          <el-table-column prop="userBirthday" label="出生日期" align="center"/>
          <el-table-column prop="userType" label="用户类型" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.userType === 2" type="success">管理员</el-tag>
              <el-tag v-else type="primary">普通用户</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="userStatus" label="是否启用" align="center">
            <template #default="scope">
              <el-switch v-model="scope.row.userStatus" :active-value="1" :inactive-value="0" @click="updateUserStatus(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" circle @click="editUserInfo(scope.row)">
                <el-icon><EditPen/></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <el-pagination style="flex: auto; justify-content: center; align-items: center"
                     v-model:current-page="query.curPage"
                     v-model:page-size="query.limit"
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 30, 50, 100]"
                     :total="totalPage"
                     :background="true"
                     @size-change="changeSize"
                     @current-change="changePage"/>
    </el-container>

    <el-dialog v-model="modifyDialogFormVisible" title="用户信息更新" width="400">
      <el-form :model="modifyForm">
        <el-form-item label="用户名" label-width="100px">
          <el-input v-model="modifyForm.userName" autocomplete="off" style="width: 200px" />
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px">
          <el-input v-model="modifyForm.userEmail" autocomplete="off" style="width: 200px" />
        </el-form-item>
        <el-form-item label="性别" label-width="100px">
          <el-radio-group v-model="modifyForm.userSex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" label-width="100px">
          <el-date-picker value-format="YYYY-MM-DD" type="date" v-model="modifyForm.userBirthday"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="modifyDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitModify">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Users",
  data() {
    return {
      userList: [],

      modifyDialogFormVisible: false,
      modifyForm: {
        userId: '',
        userName: '',
        userEmail: '',
        userSex: 0,
        userBirthday: ''
      },
      totalPage: 0,
      query: {
        limit: 10,
        curPage: 1,
        searchName: '',
      }
    }
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.$axios.get(`/user-info/list?limit=${this.query.limit}&curPage=${this.query.curPage}&searchName=${this.query.searchName}`)
          .then(({data: res}) => {
            if(res.code === 0) {
              let p = res.data;
              this.userList = p.data
              this.totalPage = p.totalPage
            } else {
              this.$message.error(res.msg);
            }
      }).catch(err => {
        this.$message.error("网络繁忙，请稍后再试！");
      })
    },
    editUserInfo(row) {
      this.$axios.get(`/user-info/${row.userId}`).then(({data: res}) => {
        if (res.code === 0) {
          this.modifyForm = res.data
          this.modifyDialogFormVisible = true;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error("网络繁忙，请稍后再试！")
      })
    },
    submitModify() {
      this.$axios.post('/user-info', this.modifyForm).then(({data: res}) => {
        if (res.code === 0 && res.data > 0) {
          this.$message.success("更新成功!");
          this.getUserList();
          this.modifyDialogFormVisible = false;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error("网络繁忙，请稍后再试！")
      })
    },
    updateUserStatus(row) {
      this.$axios.post(`/user-info/${row.userId}`).then(({data: res}) => {
        if (res.code === 0 && res.data > 0) {
          this.$message.success("更新成功!");
          this.getUserList();
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.$message.error("网络繁忙，请稍后再试！")
      })
    },
    changePage(page) {
      this.curPage = page;
      this.getUserList();
    },
    changeSize(limit) {
      this.limit = limit;
      this.getUserList();
    }
  }
}
</script>

<style scoped>

</style>
